<template>
  <div>
    <el-form
      :model="groupForm"
      :rules="groupRules"
      ref="groupForm"
      size="small"
      label-width="160px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="集团商户类型:" prop="changeType">
            <el-radio-group v-model="groupForm.changeType">
              <el-radio label="0">集团商户总账户</el-radio>
              <el-radio label="1">集团商户子账号</el-radio>
            </el-radio-group>
            <!-- <el-switch
              v-model="groupForm.isLegal"
              active-value="1"
              inactive-value="0"
              active-text="是"
              inactive-text="否">
            </el-switch> -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="groupForm.changeType == '0'?'商户:':'子商户:'" prop="rpiNo">
            <div
              class="
                el-input el-input--small el-input--suffix
                avue-input
                feint-input
              "
            >
              <span style="float: left">{{ groupForm.rpiName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                groupForm.rpiNo
              }}</span>
            </div>
            <!-- <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="groupForm.rpiNo"
              placeholder="请选择商户"
            >
              <el-option
                v-for="item in rpiNoOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="groupForm.changeType == '1'">
          <el-form-item label="集团商户:" prop="groupRpiNo">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="groupForm.groupRpiNo"
              placeholder="请选择集团商户"
              filterable
            >
              <el-option
                v-for="item in groupRpiNoOptions"
                :key="item.rpiNo"
                :label="item.rpiName"
                :value="item.rpiNo"
              >
                <span style="float: left">{{ item.rpiName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpiNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getMerchantList } from "@/api/rb-service/posinfo/pos_info";

export default {
  props: {
    groupForm: {
      type: Object,
      default: function(){
        return {}
      }
    },
  },
  data() {
    return {
      groupRules: {
        changeType: [
          { required: true, message: '请选择集团商户类型', trigger: 'blur' }
        ],
        groupRpiNo: [
          { required: true, message: '请选择集团商户', trigger: 'blur' }
        ],
      },
      groupRpiNoOptions: [],
    };
  },
  created() {
    this.getInfoData();
  },
  methods: {
    getInfoData() {
      getMerchantList('-1', '-1', '1').then((res) => {
        const data = res.data.data;
        this.groupRpiNoOptions = data.records;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.feint-input {
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  // border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #7f7f7f;
}
</style>